const { defineConfig } = require('@vue/cli-service')
// 需要排除的包对象
// let externals = {}
// 判断是否是生产环境
// const isProduction = process.env.NODE_ENV === 'production'
// 如何是生产环境，需要执行以下逻辑
// if (isProduction) {
//   externals = {
//     /**
//       * externals 对象属性解析：
//       * '包名': '在项目中引入的名字'
//       * 以 element-ui 举例 我再 main.js 里是以
//       * import ELEMENT from 'element-ui'
//       * Vue.use(ELEMENT)
//       * 这样引入的，所以我的 externals 的属性值应该是 ELEMENT
//       * 一定要去main.js设置
//     */
//     echarts: 'echarts',
//     vue: 'Vue',
//     'vue-router': 'VueRouter',
//     vuex: 'Vuex',
//     axios: 'axios',
//     dayjs: 'dayjs',
//     'element-ui': 'ELEMENT',
//     'vue-quill-editor': 'VueQuillEditor',
//     'vuex-persistedstate': 'createPersistedState'
//   }
// }
module.exports = defineConfig({
  transpileDependencies: true,
  // publicPath: './' // 这个会影响打包时，index.html中引入其他资源的前缀地址
  // ./ 可以在开发环境和生产环境下正常使用
  // 为了严谨一些
  // 开发环境: '/'
  // 生产环境: './'
  // node里有给内hi的环境变量process.env.NODE_ENV
  // process.env.NODE_ENV 会根据你敲击的命令来使用不同的值
  // 例如：
  // 如果你敲击的是 npm run serve ，process.env.NODE_ENV的值就是'development'字符串
  // 如果你敲击的是 npm run build ，process.env.NODE_ENV的值就是'production'字符串
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
  // 以上这段代码的意思是：当敲击的指令是npm run serve，证明是在开发坏境，process.env.NODE_ENV的值就是 development，根据上面的三元运算符返回 '/',如果敲击的指令是npm run build ，process.env.NODE_ENV的值是 production，根据三元运算符 返回的就是 './'

  // 这个配置项的作用是让这整个项目在打包后体积变得更小
  // configureWebpack: {
  //   // provide the app's title in webpack's name field, so that
  //   // it can be accessed in index.html to inject the correct title.
  //   externals: externals // 这个配置项的作用是告诉webpack在打包这个项目的时候，不要把下面写的指定的包一起打包进去，这样就可以做到打包后的项目体积变得更小
  // }
})
